{% extends "base.html" %}

{% block subtitle %}
  Gallery
{% endblock subtitle %}

{% block navbar_breadcrumb %}
{% endblock navbar_breadcrumb %}

{% block local_top_nav_options %}
  <div ng-controller="SearchBar">
    <div class="pull-right oppia-navbar-button-container">
      <!-- NOTE: If you change the links here, please make the corresponding change in the 'no results' message. -->
      {% if not user_email %}
        <!-- User must log in. -->
        <a class="btn oppia-navbar-add-exploration-button protractor-test-create-exploration"
           href="{{gallery_login_redirect_url}}">
          <span class="oppia-navbar-add-exploration-button-plus">+</span>
          <span>Create Exploration</span>
        </a>
      {% else %}
        <a class="btn oppia-navbar-add-exploration-button protractor-test-create-exploration"
           ng-click="showCreateExplorationModal()">
          <span class="oppia-navbar-add-exploration-button-plus">+</span>
          <span>Create Exploration</span>
        </a>
        {% if allow_yaml_file_upload %}
          <a class="btn oppia-navbar-add-exploration-button"
             ng-click="showUploadExplorationModal()">
            <span class="oppia-navbar-add-exploration-button-plus">+</span>
            <span>Upload Exploration</span>
          </a>
        {% endif %}
      {% endif %}
    </div>

    <form class="navbar-form navbar-left oppia-splash-search-form" role="search">
      <div class="form-group">
        <div class="input-group" style="max-width: 300px;">
          <div class="input-group-addon oppia-splash-search-icon">
            <span class="glyphicon"
                  ng-class="{'glyphicon-search': !searchIsLoading,
                             'glyphicon-refresh oppia-animate-spin': searchIsLoading}">
            </span>
          </div>
          <input type="text" class="form-control oppia-splash-search-input oppia-splash-search-text-input" placeholder="What are you curious about?" ng-model="searchQuery" ng-keyup="onSearchQueryChange($event)">
        </div>
      </div>
    </form>

    <div dropdown class="dropdown navbar-left oppia-navbar-button-container oppia-gallery-category-selector protractor-test-gallery-category-selector">
      <button dropdown-toggle type="button" class="btn dropdown-toggle oppia-splash-search-input ng-cloak"
              title="<[selectionDetails.categories.description]>" style="max-width: 130px;">
        <[selectionDetails.categories.summary | truncate:14 ]>
        <span class="caret"></span>
      </button>
      <!-- The $event.stopPropagation() prevents the dropdown from closing after an option is selected. -->
      <ul class="dropdown-menu" role="menu" style="max-height: 400px; overflow: auto;" ng-click="$event.stopPropagation()">
        <li ng-repeat="item in selectionDetails.categories.masterList track by $index"
            class="protractor-test-selected"
            ng-if="selectionDetails.categories.selections[item.id]">
          <a href ng-click="toggleSelection('categories', item.id)">
            <[item.text]>
            <span ng-if="selectionDetails.categories.selections[item.id]" class="glyphicon glyphicon-ok pull-right"></span>
          </a>
        </li>
        <hr ng-if="selectionDetails.categories.numSelections > 0" style="margin: 2px;">
        <li ng-repeat="item in selectionDetails.categories.masterList track by $index"
            ng-if="!selectionDetails.categories.selections[item.id]">
          <a href ng-click="toggleSelection('categories', item.id)">
            <[item.text]>
            <span ng-if="selectionDetails.categories.selections[item.id]" class="glyphicon glyphicon-ok pull-right"></span>
          </a>
        </li>
      </ul>
    </div>

    <div dropdown class="dropdown navbar-left oppia-navbar-button-container oppia-gallery-language-selector protractor-test-gallery-language-selector">
      <button dropdown-toggle type="button" class="btn dropdown-toggle oppia-splash-search-input ng-cloak"
              style="border-bottom-right-radius: 4px; border-top-right-radius: 4px; max-width: 130px;"
              title="<[selectionDetails.languageCodes.description]>">
        <[selectionDetails.languageCodes.summary | truncate:14 ]>
        <span class="caret"></span>
      </button>
      <!-- The $event.stopPropagation() prevents the dropdown from closing after an option is selected. -->
      <ul class="dropdown-menu" role="menu" style="max-height: 400px; overflow: auto;" ng-click="$event.stopPropagation()">
        <li ng-repeat="item in selectionDetails.languageCodes.masterList track by $index"
            class="protractor-test-selected"
            ng-if="selectionDetails.languageCodes.selections[item.id]">
          <a href ng-click="toggleSelection('languageCodes', item.id)">
            <[item.text]>
            <span ng-if="selectionDetails.languageCodes.selections[item.id]" class="glyphicon glyphicon-ok pull-right"></span>
          </a>
        </li>
        <hr ng-if="selectionDetails.languageCodes.numSelections > 0" style="margin: 2px;">
        <li ng-repeat="item in selectionDetails.languageCodes.masterList track by $index"
            ng-if="!selectionDetails.languageCodes.selections[item.id]">
          <a href ng-click="toggleSelection('languageCodes', item.id)">
            <[item.text]>
            <span ng-if="selectionDetails.languageCodes.selections[item.id]" class="glyphicon glyphicon-ok pull-right"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
{% endblock %}

{% block header_js %}
  {{ super() }}
  <script type="text/javascript">
    GLOBALS.LANGUAGE_CODES_AND_NAMES = JSON.parse(
      '{{LANGUAGE_CODES_AND_NAMES|js_string}}');
  </script>

  <style>
    html, body {
      background-color: #eee;
    }
  </style>
{% endblock header_js %}

{% block content %}
  <div ng-controller="Gallery" class="oppia-gallery-container">
    <div ng-if="inSplashMode">
      <div class="oppia-gallery-banner-content">
        Hi, I&rsquo;m Oppia
      </div>
      <carousel interval="CAROUSEL_INTERVAL">
        <slide ng-repeat="slide in CAROUSEL_SLIDES track by $index" active="slide.active">
          <div class="oppia-gallery-banner" style="background-image: url(<[slide.imageUrl]>);">
            <div class="oppia-gallery-banner-tagline">
              Your personal tutor for <a ng-href="/explore/<[slide.explorationId]>" class="oppia-gallery-banner-link">
              <[slide.explorationSubject]>
            </a>
            </div>
          </div>
        </slide>
      </carousel>

      <div class="oppia-gallery-interstitial">
        <img src="/images/oppia_favicon_black_48px.png" style="width: 28px; height: 28px; margin-right: 5px; margin-top: -2px;">
        <span>
          I'm a free, open source, community-built tutor for everybody.
          <div style="display: inline-block;"><a href="/about">Learn more about me.</a></div>
        </span>
      </div>
    </div>

    <div>
      <div class="oppia-gallery-tiles-container">
        <div ng-if="allExplorationsInOrder.length === 0">
          <em>
            We don't have any explorations matching this query yet.
          </em>
          <!-- NOTE: If you change the links here, please make the corresponding change for the 'Create New Exploration' button. -->
          {% if not user_email %}
            <a href="{{gallery_login_redirect_url}}">Would you like to create one?</a>
          {% else %}
            <a ng-click="showCreateExplorationModal()">Would you like to create one?</a>
          {% endif %}
        </div>

        <div ng-if="inSplashMode && allExplorationsInOrder.length > 0" class="oppia-gallery-tiles-introduction">
          <span>
            Here are some explorations that the Oppia community has created:
          </span>
        </div>

        <div infinite-scroll="showMoreExplorations()" infinite-scroll-distance="1"
             infinite-scroll-disabled="finishedLoadingPage || pageLoaderIsBusy">
          <div ng-repeat="exploration in allExplorationsInOrder track by $index">
            <md-card layout="row" class="oppia-gallery-tile protractor-test-gallery-tile">
              <a class="btn btn-default btn-sm hidden-xs oppia-gallery-edit-btn"
                 ng-if="exploration.is_editable" ng-href="/create/<[exploration.id]>">
                <span class="glyphicon glyphicon-pencil protractor-test-edit-exploration"
                      title="Edit this exploration"></span>
                Edit
              </a>
              {% if is_moderator %}
                <a class="btn btn-default btn-sm hidden-xs oppia-gallery-edit-btn"
                   ng-if="!exploration.is_editable && currentUserIsModerator"
                   ng-href="/create/<[exploration.id]>">
                  <span class="glyphicon glyphicon-pencil protractor-test-edit-exploration"
                        title="Edit (as moderator)"></span>
                  Edit (as moderator)
                </a>
              {% endif %}

              <a href="/explore/<[exploration.id]>" class="oppia-gallery-tile-container-link" style="text-decoration: none;">
                <div class="oppia-gallery-tile-contents">
                  <span class="oppia-gallery-tile-image-container"
                        ng-class="getImageContainerClass(exploration)"
                        style="position: absolute;">
                    <!-- TODO(sll): Make the default image higher-res. -->
                    <img class="oppia-gallery-tile-image" ng-src="<[getImageSrcUrl(exploration)]>">
                  </span>

                  <div class="oppia-gallery-tile-details">
                    <div class="oppia-gallery-tile-first-row">
                      <span class="oppia-gallery-tile-title protractor-test-gallery-tile-title">
                        <[exploration.title]>
                      </span>
                      <span ng-if="exploration.objective">
                        <span style="font-weight: bold;">&middot;</span>
                        <span style="color: #888" class="protractor-test-exploration-objective">
                          <[getFormattedObjective(exploration.objective)]>
                        </span>
                      </span>
                    </div>

                    <div class="oppia-gallery-tile-second-row">
                      <span ng-if="exploration.status === 'publicized'" style="color: #888">
                        Featured
                        <span class="glyphicon glyphicon-star"></span>
                        <span style="font-weight: bold;">&middot;</span>
                      </span>
                      <span style="color: #888">
                        <strong><[exploration.category]></strong>
                        <span style="font-weight: bold;">&middot;</span>
                        Last updated <[getLocaleAbbreviatedDatetimeString(exploration.last_updated)]>
                      </span>
                    </div>
                  </div>
                </div>
              </a>
            </md-card>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% include 'components/exploration_creation_button.html' %}
{% endblock %}

{% block footer_js %}
  {{ super() }}
  <script>
    {{ include_js_file('components/explorationCreationButton.js') }}
    {{ include_js_file('galleries/Gallery.js') }}
  </script>
{% endblock footer_js %}
